<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zxx">

<head>
    <meta charset="UTF-8">
    <meta name="description" content="Flyplane Template">
    <meta name="keywords" content="Flyplane, unica, creative, html">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>通辽航空管理系统</title>

    <!-- Google Font -->
    <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@200;300;400;600;700;800;900&display=swap"
        rel="stylesheet">

    <!-- Css Styles -->
    <link rel="stylesheet" href="qt/css/bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="qt/css/font-awesome.min.css" type="text/css">
    <link rel="stylesheet" href="qt/css/elegant-icons.css" type="text/css">
    <link rel="stylesheet" href="qt/css/barfiller.css" type="text/css">
    <link rel="stylesheet" href="qt/css/magnific-popup.css" type="text/css">
    <link rel="stylesheet" href="qt/css/nice-select.css" type="text/css">
    <link rel="stylesheet" href="qt/css/slick.css" type="text/css">
    <link rel="stylesheet" href="qt/css/datepicker.min.css" type="text/css">
    <link rel="stylesheet" href="qt/css/owl.carousel.min.css" type="text/css">
    <link rel="stylesheet" href="qt/css/slicknav.min.css" type="text/css">
    <link rel="stylesheet" href="qt/css/style.css" type="text/css">
    <link rel="stylesheet" href="qt/css/my.css" type="text/css">
</head>

<body>
    <!-- Page Preloder -->
    <div id="preloder">
        <div class="loader"></div>
    </div>

    <!-- Offcanvas Menu Begin -->
    <div class="offcanvas-menu-overlay"></div>
    <div class="offcanvas-menu-wrapper">
        <div class="offcanvas__logo">
            <a href="#"><img src="qt/img/logo.png" alt=""></a>
        </div>
        <div id="mobile-menu-wrap"></div>
        <div class="offcanvas__widget">
            <ul>
                <li><span class="icon_pin"></span> 84 Forest Ave, Lake Grove, New York</li>
                <li><span class="icon_phone"></span> (+12) 345-678-91012</li>
                <li><span class="icon_mail"></span> contact.17sucai@gmail.com</li>
            </ul>
        </div>
        <div class="offcanvas__social">
            <a href="#"><span class="social_facebook"></span></a>
            <a href="#"><span class="social_twitter"></span></a>
            <a href="#"><span class="social_youtube"></span></a>
            <a href="#"><span class="social_skype"></span></a>
        </div>
    </div>
    <!-- Offcanvas Menu End -->

    <!-- Header Section Begin -->
    <header class="header">
        <div class="container">
            <div class="header__top">
                <div class="row">
                    <div class="col-lg-9">
                        <div class="header__top__widget">
                            <ul>
                                <li><span class="icon_pin"></span> 84 Forest Ave, Lake Grove, New York</li>
                                <li><span class="icon_phone"></span> (+12) 345-678-91012</li>
                                <li><span class="icon_mail"></span> contact.17sucai@gmail.com</li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="header__top__social">
                            <a href="#"><span class="social_facebook"></span></a>
                            <a href="#"><span class="social_twitter"></span></a>
                            <a href="#"><span class="social_youtube"></span></a>
                            <a href="#"><span class="social_skype"></span></a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="header__options">
                <div class="row">
                    <div class="col-lg-3">
                        <div class="header__logo">
                            <a href="./index.html"><img src="qt/img/logo.png" alt=""></a>
                        </div>
                    </div>
                    <div class="col-lg-9">
                        <nav class="header__menu mobile-menu">
                            <ul>
                                <li class="active"><a href="./user_index.jsp">首页</a></li>
                                <li><a href="#">我的订单</a>
                                    <ul class="dropdown">
                                        <li><a href="TicketListServlet?pageNo=1">订单列表</a></li>
                                        <li><a href="ChangeTicketListServlet?pageNo=1">改签申请记录</a></li>
                                        <li><a href="QuitListByUserIdServlet?pageNo=1">退票申请</a></li>
                                    </ul>
                                </li>
                                <li><a href="FlightListServlet?pageNo=1">航班大厅</a></li>
                                <li><a href="./about.html">About Us</a></li>
                                <li><a href="./contact.html">Contacts</a></li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
            <div class="canvas__open"><i class="fa fa-bars"></i></div>
        </div>
    </header>
    <!-- Header Section End -->

    <!-- Hero Section Begin -->
    <section class="hero spad set-bg" data-setbg="qt/img/hero.jpg">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="hero__text">
                        <h2>Let's Make Your Best Trip Ever</h2>
                        <p>欢迎来到通过航空管理系统</p>
                        <a href="#" class="primary-btn">Discover Now</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Hero Section End -->

    <!-- Search Begin -->
    <div class="filter-search flex justify-center items-center">
        <div class="flex flex-wrap w-2/3 shadow-2xl">
            <div class="w-full h-12 bg-gray-500/30">
                <ul id="select-list" class="w-full h-full flex cursor-pointer">
                    <li data-id="ydxc" class="select-item w-1/5 h-full text-center flex items-center justify-center text-white text-lg">预定行程</li>
                    <li data-id="jptg" class="w-1/5 h-full text-center flex items-center justify-center text-white text-lg">机票退改</li>
                    <li data-id="hbfw" class="w-1/5 h-full text-center flex items-center justify-center text-white text-lg">航班服务</li>
                    <li data-id="ddgl" class="w-1/5 h-full text-center flex items-center justify-center text-white text-lg">订单管理</li>
                    <li data-id="yddxz" class="w-1/5 h-full text-center flex items-center justify-center text-white text-lg">移动端下载</li>
                </ul>
            </div>
            <div class="w-full bg-white opacity-100">
                <div id="ydxc" class="fly-from">
                    <!-- 预定机票 -->
                    <form class="py-2 px-4" action="SelectFlightServlet" method="get">
                        <div class="w-full flex my-3">
                            <div class="px-4 flex items-center">
                                <input data-id="type-dc" id="type-dc" value="单程" name="type" type="radio" checked />
                                <label for="type-dc" class="ml-1.5">单程</label>
                            </div>
                            <div class="px-4 flex items-center">
                                <input data-id="type-wf" id="type-wf" value="往返" name="type" type="radio" />
                                <label for="type-wf" class="ml-1.5">往返</label>
                            </div>
                        </div>
                        <div class="w-full flex justify-between my-3 px-4 relative">
                            <div class="p-2 flex items-center border">
                                <span class="flex items-center text-gray-500">
                                    <img class="mx-2 w-5 h-5" src="qt/svg/local.svg" />
                                    从
                                </span>
                                <input id="startLocation" class="text-center" name="startLocation" type="text" placeholder="请输入城市" />
                            </div>
                            <div id="swapLocation" class="p-2 cursor-pointer">
                                <img class="mx-2" src="qt/svg/refresh.svg" />
                            </div>
                            <div class="p-2 flex items-center border">
                                <span class="flex items-center text-gray-500">
                                    <img class="mx-2 w-5 h-5" src="qt/svg/local.svg" />
                                    到
                                </span>
                                <input id="endLocation" class="text-center" name="endLocation" type="text" placeholder="请输入城市" />
                            </div>
                            <div id="select-location-box" style="display: none;" class="z-10 absolute w-96 bottom-0 translate-y-full bg-white shadow-lg p-2">
                                <div class="btn-list flex justify-between">
                                    <button type="button" data-id="gn" class="select-btn transition border-2 border-blue-600 hover:bg-blue-600 px-10 py-2">国内（含港澳台）</button>
                                    <button type="button" data-id="gj" class="transition border-2 border-blue-600 hover:bg-blue-600 px-10 py-2">国际</button>
                                </div>
                                <div class="mt-2 border-b-2 pb-1">
                                    <ul class="location-list grid grid-cols-3 text-center">
                                        <li data-id="rmcs" class="active-location">热门城市</li>
                                        <li data-id="abcde">ABCDE</li>
                                        <li data-id="fghij">FGHIJ</li>
                                        <li data-id="klmno">KLMNO</li>
                                        <li data-id="pqret">PQRET</li>
                                        <li data-id="uvwxyz">UVWXYZ</li>
                                    </ul>
                                </div>
                                <div class="mt-2">
                                    <ul class="select-location grid grid-cols-3 text-center gap-1">
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="w-full flex my-3 px-4">
                            <div class="p-2 mr-6 flex items-center border">
                                <span class="flex items-center text-gray-500">
                                    <img class="mx-2 w-5 h-5" src="qt/svg/time.svg" />
                                    出发
                                </span>
                                <input id="startTime" class="text-center" name="startTime" type="date" />
                                <!-- <img class="mx-2" src="./svg/calendar.svg" /> -->
                            </div>
                            <div id="backTimeFrom" class="p-2 flex items-center border" style="display: none;">
                                <span class="flex items-center text-gray-500">
                                    <img class="mx-2 w-5 h-5" src="qt/svg/time.svg" />
                                    返程
                                </span>
                                <input id="backTime" class="text-center" name="backTime" type="date" />
                                <!-- <img class="mx-2" src="./svg/calendar.svg" /> -->
                            </div>
                        </div>
                        <div class="w-full my-3 px-4 flex justify-center">
                            <input type="hidden" id="pageNo" name="pageNo" value="1">
                            <button id="ljyd" type="submit" class="transition bg-blue-700 hover:bg-blue-600 px-10 py-2 rounded-lg text-white">查看航班</button>
                        </div>
                    </form>
                </div>





                <div id="jptg" class="fly-from" style="display: none;">
                    <form id="ticketForm" method="post" class="py-2 px-4" action="AmendTicketServlet">
                        <!-- 类型选择 -->
                        <div class="w-full mt-2">
                            <ul id="jptg-type-list" class="flex space-x-8">
                                <li data-id="gq" class="select-type cursor-pointer">机票改期</li>
                                <li data-id="tp" class="cursor-pointer">不正常航班退票</li>
                            </ul>
                        </div>
                    
                        <!-- 表单内容 -->
                        <div class="w-full flex justify-between my-3 relative">
                            <div class="flex items-center">
                                <label class="mr-4">旅客姓名<span class="ml-1 text-red-500">*</span></label>
                                <input id="jptg-name" class="w-72 p-2 border" name="jptg-name" type="text" placeholder="请输入购票时姓名" />
                            </div>
                            <div id="jptg-zjhm" class="flex items-center">
                                <label class="mr-4">证件号码<span class="ml-1 text-red-500">*</span></label>
                                <input id="idNumber" class="w-72 p-2 border" name="idNumber" type="text" placeholder="请输入证件人证件号" />
                            </div>
                            <div id="jptg-pzhm" class="flex items-center" style="display: none;">
                                <label class="mr-4">航班号<span class="ml-1 text-red-500">*</span></label>
                                <input id="pzNumber" class="w-72 p-2 border" name="flightNumber" type="text" placeholder="请输入航班号" />
                            </div>
                        </div>
                    
                        <!-- 航班号输入 -->
                        <div id="hbh-input-box" class="w-full flex justify-between my-3 relative">
                            <div class="flex items-center">
                                <label class="mr-4">原航班号<span class="ml-1 text-red-500">*</span></label>
                                <input id="startPoint" class="w-72 p-2 border" name="originalFlight" type="text" placeholder="请输入原航班号" />
                            </div>
                            <div class="flex items-center">
                                <label class="mr-4">新航班号<span class="ml-1 text-red-500">*</span></label>
                                <input id="endPoint" class="w-72 p-2 border" name="newFlight" type="text" placeholder="请输入新航班号" />
                            </div>
                        </div>
                       
                        <!-- 座位号和提交 -->
                        <div class="w-full flex justify-between my-3 relative">
                            <div id="jptg-cfrq" class="flex items-center">
                                <label class="mr-4">座位号<span class="ml-1 text-red-500">*</span></label>
                                <input id="seatNumber" class="w-72 p-2 border" name="seatNumber" type="text" placeholder="请输入座位号"/>
                            </div>
                            <button type="submit" class="transition bg-blue-700 hover:bg-blue-600 px-10 py-2 rounded-lg text-white">
                                立即办理
                            </button>
                        </div>


                        <div class="w-full mt-3 pb-1 border-t pt-3">
                            <div class="flex text-sm items-center">
                                <img class="w-4 h-4 mr-2" src="./svg/remind.svg" />
                                <span>温馨提示</span>
                            </div>
                            <ol id="jptg-remind" class="text-sm">

                            </ol>
                        </div>
                    </form>
                </div>

                
                <div id="hbfw" class="fly-from" style="display: none;">
                    航班服务
                </div>
                <div id="ddgl" class="fly-from" style="display: none;">
                    <form class="py-2 px-4">
                        <div class="w-full flex justify-between my-3 relative">
                            <div class="flex items-center">
                                <label class="mr-4">旅客姓名<span class="ml-1 text-red-500">*</span></label>
                                <input id="ddgl-name" class="w-72 p-2 border" name="ddgl-name" type="text" placeholder="请输入购票时姓名" />
                            </div>
                            <div class="flex items-center">
                                <label class="mr-4">手机号码<span class="ml-1 text-red-500">*</span></label>
                                <input id="ddgl-phone" class="w-72 p-2 border" name="ddgl-phone" type="text" placeholder="请输入购票时手机号" />
                            </div>
                        </div>
                        <div class="w-full flex justify-center my-3 relative">
                            <button id="cxdd" type="button" class="transition bg-blue-700 hover:bg-blue-600 px-10 py-2 rounded-lg text-white">查询订单</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Latest Section End -->

    <!-- Footer Section Begin -->
    <footer class="footer spad">
        <div class="container">
            <div class="row d-lfex justify-content-center">
                <div class="col-lg-7">
                    <div class="footer__text">
                        <div class="footer__about">
                            <div class="footer__logo">
                                <a href="#"><img src="qt/img/footer-logo.png" alt=""></a>
                            </div>
                            <p>Nullam ultrices tortor non diam ullamcorper auctor. In urna tellus, auctor sit amet est
                                ut, scelerisque volutpat diam.</p>
                        </div>
                        <div class="footer__social">
                            <a href="#"><span class="social_facebook"></span></a>
                            <a href="#"><span class="social_twitter"></span></a>
                            <a href="#"><span class="social_youtube"></span></a>
                            <a href="#"><span class="social_skype"></span></a>
                        </div>
                        <div class="footer__nav">
                            <ul>
                                <li><a href="./index.html">Home</a></li>
                                <li><a href="#">Pages</a></li>
                                <li><a href="./blog.html">Blog</a></li>
                                <li><a href="./about.html">About Us</a></li>
                                <li><a href="./contact.html">Contacts</a></li>
                            </ul>
                        </div>

                        <p class="footer__copyright">Copyright &copy;
                            <script>document.write(new Date().getFullYear());</script> All rights reserved | This
                            template is made with <i class="fa fa-heart color-danger" aria-hidden="true"></i> by <a
                                href="https://www.17sucai.com" target="_blank" rel="nofollow noopener">17sucai</a>
                        </p>

                    </div>
                </div>
            </div>
        </div>
    </footer>
    <!-- Footer Section End -->

    <!-- Js Plugins -->
    <script src="qt/js/jquery-3.3.1.min.js"></script>
    <script src="qt/js/bootstrap.min.js"></script>
    <script src="qt/js/jquery.barfiller.js"></script>
    <script src="qt/js/jquery.magnific-popup.min.js"></script>
    <script src="qt/js/jquery.nice-select.min.js"></script>
    <script src="qt/js/slick.min.js" charset="UTF-8"></script>
    <script src="qt/js/jquery.slicknav.js"></script>
    <script src="qt/js/owl.carousel.min.js"></script>
    <script src="qt/js/datepicker.min.js"></script>
    <script src="qt/js/main.js"></script>
    <script src="qt/js/my.js"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const form = document.getElementById('ticketForm');
            const typeItems = document.querySelectorAll('#jptg-type-list li');
            
            // 类型切换功能
            typeItems.forEach(item => {
                item.addEventListener('click', function() {
                    // 切换选中样式
                    document.querySelectorAll('#jptg-type-list li').forEach(li => {
                        li.classList.remove('select-type');
                    });
                    this.classList.add('select-type');
                    
                    // 切换表单action
                    const type = this.getAttribute('data-id');
                    form.action = type === 'gq' ? 'AmendTicketServlet' : 'QuitTicketServlet';
                    
                    // 切换字段显示
                    document.getElementById('hbh-input-box').style.display = 
                        type === 'gq' ? 'flex' : 'none';
                    document.getElementById('jptg-pzhm').style.display = 
                        type === 'tp' ? 'flex' : 'none';
                    document.getElementById('jptg-cfrq').style.display = 'flex' ;
                });
            });
        });
        </script>
</body>

</html>